<template>
    <div>
        <!-- $route.params.xx 这个xx就是路由定义冒号后边的字符串 -->
        帖子{{ $route.params.id }}-二级页面
        <br>
        通过Props获取的id为: {{ id }}
        <br>
        <button @click="goBack">后退</button>
    </div>
</template>

<script setup>
    import { onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    const router = useRouter()
    const props = defineProps({
        id: String
    })
    onMounted(() => {
        console.log(`通过${props.id}获取帖子的内容`)
    })
    const goBack = () =>{ 
        router.go(-1) // 1代表前进 -1代表后退
    }
</script>

<style scoped>
div {
    height: 100px;
    width: 500px;
    margin: 20px auto;
    border-radius: 10px;
    border: 1px solid #000;
    text-align: center;
    background-color: rgb(221, 20, 20);
}
button {
    margin-top: 10px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #000;
    background-color: rgb(92, 185, 247);
    color: #fff;
    cursor: pointer;
}
</style>